<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本资料</title>
    <link rel="stylesheet" href="./css/app.css">
    <link rel="stylesheet" href="../font/ionicons-2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../tools/multisSelect/bootstrap-multiselect.css">
</head>
<body>
<div class="baseinfo-body person-auth">
    <div class="to" style="">
        <!--加载公共的样式-->
        @@include('./include/top.html')
        <!--栅格系统第二行开始-->
        <div class="row top2">
            <div class="col-md-2 ul">
                <p>个人资料</p>
            </div>
            <div class="col-md-2 ul">
                <p>修改密码</p>
            </div>
            <div class="col-md-2 ul">
                <p class="active">认证信息</p>
            </div>
            <div class="col-md-2 col-md-offset-4 ul">
                <div class="you">
                    <span>预览个人主页</span>
                </div>
            </div>
        </div>
        <!--栅格系统第二行结束-->
        <div class="row top5"  style="min-height:  1000px;">
            <div class="col-sm-12 alert alert-warning">
                <i class="ion ion-information-circled"></i>
                您在此上传的所有认证资料与信息，只用于网站后台审核使用，不会对外公开。
            </div>
            <form class="form-horizontal" role="form" method="post" name="myform" style="padding: 30px 20px;">
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">真是姓名</label>
                    <div class="col-sm-4 auth-name">
                        <span>杨坤</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-1 auth-header">
                        <img src="http://static.icanting.com.cn/avatar/000/01/29/98_avatar_small.jpg" alt="" class="img-responsive img-circle">
                    </div>

                    <div class="col-sm-1  header-edit">
                        <a href="">修改</a><input type="file" name="" id="" class="header-edit-file">
                    </div>

                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">身份证/护照号</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="firstname" placeholder="">
                    </div>
                    <div class="col-sm-4 col-sm-offset-2 auth-desc">
                        由于本网站涉及交易，为保障用户交易安全，只有通过身份证
                        认证后才可接发任务，身份证不会用于其他用途
                    </div>
                    <div class="col-sm-6 col-sm-offset-2 auth-desc-image">
                        <img src="http://www.icanting.com.cn/img/pubimg/idcard1.png" alt="" class="">
                        <img src="http://www.icanting.com.cn/img/pubimg/idcard2.png" alt="" class="">
                    </div>
                </div>
                <div class="form-group profession-image">
                    <label for="firstname" class="col-sm-2 control-label">职称</label>
                    <div class="col-sm-3">
                        <div id="" class="auth-show-image">
                            <img class="img-responsive" src="http://oni63dq3q.bkt.clouddn.com/yrKA6wbfkEYuEjBpimq7KTiq3LIWeCjISNrhn4bG.jpeg?e=1494470579&token=kJ1yeKo20UjXPueHKX1e54dtgRMhGiD8D8GH_J9S:mN6YyXfcyVHbWz_pb3jfR6pwSAM=">
                            <!--<a href="javascript:;" class="img-close"><i class="ion ion-close"></i></a>-->
                        </div>
                        <input type="file" class="form-control auth-upload" name="">
                    </div>
                    <div class="col-sm-3 auth-show-image-desc">
                            <textarea name="" rows="11" class="form-control"></textarea>
                    </div>
                </div>
                <div class="form-group profession-image">
                    <label for="firstname" class="col-sm-2 control-label">职业资格</label>
                    <div class="col-sm-3">
                        <div id="" class="auth-show-image">
                            <img class="img-responsive" src="http://oni63dq3q.bkt.clouddn.com/yrKA6wbfkEYuEjBpimq7KTiq3LIWeCjISNrhn4bG.jpeg?e=1494470579&token=kJ1yeKo20UjXPueHKX1e54dtgRMhGiD8D8GH_J9S:mN6YyXfcyVHbWz_pb3jfR6pwSAM=">
                            <!--<a href="javascript:;" class="img-close"><i class="ion ion-close"></i></a>-->
                        </div>
                        <input type="file" class="form-control auth-upload" name="">
                    </div>
                    <div class="col-sm-3 auth-show-image-desc">
                        <textarea name="" rows="11" class="form-control"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-danger">保存</button>
                    </div>
                </div>

            </form>

        </div>






    </div>
</div>
</div>
</body>
<script src="./js/jquery/jquery.js"></script>
<script src="./js/bootstrap/bootstrap.js"></script>
<script src="../tools/Calendar.js"></script>
<script src="./js/app.js"></script>
<script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js"></script>
<script>
    $('#Js_new_password').keyup(function () {
        var val = $(this).val();
        var lentght = checkStrong(val);


    });

    $(document).on('change', '.auth-upload', function(){
        readURL(this, $(this).siblings('.auth-show-image').find('img'));
        var html = '  <div class="form-group profession-image"> '+
            ' <label for="firstname" class="col-sm-2 control-label"></label>' +
            '<div class="col-sm-3">' +
            '<div class="auth-show-image">'  +
            '<img class="img-responsive" src="./img/upload-sign.png">' +
            '<a href="javascript:;" class="img-close hide"><i class="ion ion-close"></i></a>' +
            '</div>' +
            '<input type="file" class="form-control auth-upload" name="">' +
            '</div>' +
            '<div class="col-sm-3 auth-show-image-desc hide">' +
            '<textarea name="" rows="11" class="form-control "></textarea>' +
            ' </div></div>';
        $(this).parents('.profession-image').after(html);
        $(this).siblings('.auth-show-image').find('a').removeClass('hide');
        $(this).parents().siblings('.auth-show-image-desc').removeClass('hide');

    });

    $(document).on('click', '.img-close', function(){
        $(this).parents('.profession-image').remove();
    });
    //图片预览函数
    function readURL(input, imageCover) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                imageCover.attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    $('.header-edit-file').change(function () {
//        console.log($('.auth-header').find('img'));
        readURL(this, $('.auth-header').find('img'))
    })


</script>
</html>